/**
 * 设备批量分配收费模式或者投放点的table
 */
import React, { Component } from 'react';
import { Modal, Table, Radio, message } from 'antd';
import { connect } from 'dva';
import getPagination from '../../components/pagination';
import { defaultData, assignDeviceBatch } from '../../services/device';
import { isSuccess } from '../../configs/error';

const RadioGroup = Radio.Group;

const columns = {
    launch: [
        {
            title: '投放点名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address'
        },
        {
            title: '设备数',
            dataIndex: 'deviceCount',
            key: 'deviceCount'
        },
    ],
    mode: [
        {
            title: '收费名称',
            dataIndex: 'serviceMode',
            key: 'serviceMode',
        },
        {
            title: '收费类型',
            dataIndex: 'serviceType',
            key: 'serviceType'
        },
        {
            title: '设备数',
            dataIndex: 'deviceCount',
            key: 'deviceCount'
        },
    ],
};

class SelectTable extends Component {
    state = {
        selfOperating: 1
    }
    componentWillMount() {
        const { selfOperating } = this.state;
        const { modeType } = this.props;
        const data = {};
        if (!modeType) data.selfOperating = selfOperating;
        this.query({ ...defaultData.query, query: data }, modeType);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.modeType !== this.props.modeType) {
            const { selfOperating } = this.state;
            this.setState({ selectedObj: null });
            this.query({ ...defaultData.query, query: { selfOperating } }, nextProps.modeType);
        }
    }
    // 隐藏modal
    onCancel = () => {
        const { dispatch } = this.props;
        this.setState({ keys: [], selectedObj: [] });
        dispatch({
            type: 'device/hideModal',
        });
    }
    onChange = (e) => {
        const selfOperating = e.target.value;
        this.query({ ...defaultData.query, query: { selfOperating } });
        this.setState({ selfOperating });
    }
    pageChange = (current, size) => {
        const { selfOperating } = this.state;
        this.query({ ...defaultData.query, current, size, query: { selfOperating } });
    }
    pagesizgeChange = (current, size) => {
        const { selfOperating } = this.state;
        this.query({ ...defaultData.query, current: 1, size, query: { selfOperating } });
    }

    // 请求
    query = (payload, modeType) => {
        const { dispatch } = this.props;
        dispatch({
            type: modeType ? 'deviceLaunchArea/query' : 'serviceMode/query',
            payload
        });
    }
    // 限制单选
    rowChange = (keys, rows) => {
        const { multiselect } = this.props; // 是否多选
        if (multiselect) {
            this.setState({ keys, selectedObj: rows });
        } else {
            if (keys.length > 2) {
                this.setState({ selectedRowKeys: [] });
            } else if (keys.length !== 2) {
                this.setState({ keys, firstOneKey: keys[0], selectedObj: rows });
            } else if (keys.length === 2) {
                const key = keys.find(v => v !== this.state.firstOneKey);
                const row = rows.find(v => v.id !== this.state.firstOneKey);
                this.setState({ keys: [key], firstOneKey: key, selectedObj: [row] });
            }
        }
    };
    submit = async () => {
        const { modeType, keys, isDetail, editMode, multiselect } = this.props;
        const { selectedObj = [] } = this.state;
        // console.log(keys);
        // console.log(selectedObj);
        if (!selectedObj.length) {
            message.warning('请选择选项');
            return;
        }
        if (isDetail) {
            editMode && editMode(selectedObj);
        } else {
            const data = {
                sno: keys,
                type: modeType ? 2 : 1
            };
            if (modeType || !multiselect) data.assignId = selectedObj[0].id;
            else data.assignIdList = selectedObj.map(v => v.id);
            // console.log(data);
            const res = await assignDeviceBatch(data);
            if (isSuccess(res)) {
                message.success('提交成功！！！');
                this.props.reflesh(1);
                this.onCancel();
            }
        }
    }


    render() {
        const { device, loading, serviceMode, deviceLaunchArea, modeType, multiselect } = this.props;
        const { modalVisible } = device;
        let list = null;
        let total = null;
        let current = null;
        let effect = null;
        let name = null;
        if (modeType) {
            list = deviceLaunchArea.list;
            total = deviceLaunchArea.total;
            current = deviceLaunchArea.page;
            effect = 'deviceLaunchArea/query';
            name = 'launch';
        } else {
            list = serviceMode.list;
            total = serviceMode.total;
            current = serviceMode.page;
            effect = 'serviceMode/query';
            name = 'mode';
        }
        const { selfOperating, keys = [] } = this.state;
        const rowSelection = {
            type: modeType || !multiselect ? 'radio' : '',
            onChange: this.rowChange,
            selectedRowKeys: keys
        };
        return (
            <Modal
                visible={modalVisible}
                onCancel={this.onCancel}
                onOk={this.submit}
                title={modeType ? '设备投放' : '配置收费规则'}
                width={600}
            >
                <div>
                    {
                        !modeType ? (
                            <div style={{ paddingLeft: '20px', marginBottom: '20px' }}>
                                <RadioGroup onChange={this.onChange} value={selfOperating}>
                                    <Radio value={1}>自有</Radio>
                                    <Radio value={0}>上级</Radio>
                                </RadioGroup>
                            </div>
                        ) : null
                    }
                    <Table
                        dataSource={list}
                        columns={columns[name]}
                        pagination={getPagination({
                            total,
                            current,
                            onChange: this.pageChange,
                            onShowSizeChange: this.pagesizgeChange
                        })}
                        rowSelection={rowSelection}
                        loading={loading.effects[effect]}
                        rowKey="id"
                    />
                </div>
            </Modal>
        );
    }
}

export default connect(({ device, deviceLaunchArea, serviceMode, loading }) => ({ device, deviceLaunchArea, serviceMode, loading }))(SelectTable);
